<template>
    <div class="content-s">
        <el-button @click="isShow = !isShow">显示/隐藏</el-button>
        <transition appear>
           <h3 v-show='isShow'> 简单移动动画 </h3>
         </transition>
    </div>

    <div class="auto-box">

    </div>
</template>

<script>
export default {    
    name:'animation',
    data(){
        return {
            isShow:true
        }
    }
}
</script>

<style scoped lang="scss"> 
$bgrd :pink;
.auto-box{
    width: 20%;
    background: $bgrd;
    aspect-ratio: 1;
} 
    h3{
        background: orange;
    }
    /* .v-enter{
        transform: translateX(-100%);
    } */
   .v-enter-active{
        animation: isShow 1s;
        /* transform: translateX(-100%); */
    }
    .v-leave-active{
        animation: isShow 1s reverse;
        /* transform: translateX(0); */
    }
    @keyframes isShow {
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0);
        }
    }
</style>
   